<template>
	<div class="Login">
		<div class="logo">
			<img src="../assets/log.png" alt="">
		</div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
		  <el-form-item prop="username">
		    <el-input v-model="ruleForm.username" placeholder="请输入快步手机号" style="border-radius: 20px;">
				<i slot="prefix" class="el-input__icon el-icon-user"></i>
			</el-input>
		  </el-form-item>
		  <el-form-item prop="password">
		    <el-input :type="type" v-model="ruleForm.password" placeholder="请输入密码">
				<i slot="prefix" class="el-input__icon el-icon-unlock"></i>
				<i slot="suffix" class="el-input__icon el-icon-view" :class="{active:active?'active':''}" @click="view"></i>
			</el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submit('ruleForm')" class="btn">登录</el-button>
		  </el-form-item>
		</el-form>
		<div class="bg">
			<img src="../assets/WechatIMG15.png" alt="">
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				active:false,
				type:'password',
				c:'',
				ruleForm:{
					username:'',
					password:''
				},
				rules:{
					username:[{ required: true, message: '用户名不能为空', trigger: 'blur' },],
					password:[{ required: true, message: '密码不能为空', trigger: 'blur' },],
				}
			}
		},
		mounted(){
			this.query = this.$route.query;
			this.exitsToken();
		},
		methods:{
			exitsToken(){
				this.$http.get(this.$api.islogin,this.query).then((res)=>{
					if(res.code == 0){
						localStorage.setItem('logo',JSON.stringify(res.data));
						this.$router.push('/Authorize');
					}else{
						this.$message.error(res.msg);
					}
				});	
			},
			view(){
				if(this.active){
					this.active = false;
					this.type = 'password'
				}else{
					this.active = true;
					this.type = 'text'
				}
			},
			submit(formName){
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					 let Password = this.$md5(this.ruleForm.password);
					 this.$http.post(this.$api.login+'?password='+Password+'&grant_type=password&username='+this.ruleForm.username+'&client_id=kuaibu_wap&client_secret=123456').then(res=>{
						if(res.code == 1){
							this.$message.error('快步手机号或密码有误！');
						}else{
							localStorage.setItem('token',res.data.access_token)
							this.exitsToken();
						}
					 })
				  } else {
					return false;
				  }
				});
			}
		}
	}
</script>
<style>
	.active{
		color: #FF9800;
	}
	.Login {
		height: 100%;
		display: flex;
		flex-direction: column;
		max-width: 450px;
		margin: auto;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}

	.logo {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50px 0;
	}

	.logo img {
		width: 65px;
		height: 65px;
		border-radius: 5px;
	}

	.bg img {
		width: 100%;
		height: 100%;
	}

	.form {
		width: 100%;
		padding: 0 30px;
		flex: 1;
		
	}
	.el-input__inner{
		border-radius: 20px;
	}
	.btn{
		width: 100%;
		border-radius: 20px;
		background: linear-gradient(to right, #ff6600 0%, #ff9933 100%);
		border:none;
	}
	.el-button--primary:focus, .el-button--primary:hover{
		background: linear-gradient(to right, #ff6600 0%, #ff9933 100%);
	}
	.el-input.is-active .el-input__inner, .el-input__inner:focus{
		border-color:#ffd495;
	}
	.el-input__icon{
		font-size: 20px;
	}
	.el-input--prefix .el-input__inner{
		padding-left: 40px;
	}
	.el-input__prefix{
		left:10px;
	}
	.el-input--suffix .el-input__inner{
		padding-right: 40px;
	}
	.el-input__suffix{
		right: 10px;
	}
</style>
